<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>artDialog</title>
<meta name="keywords" content="artDialog,javascript,dialog,jQuery" />
<meta name="description" content="artDialog是一个精巧的web对话框组件，压缩后只有十多KB，并且不依赖其他框架。" />
<script>
// skin demo
(function() {
	var _skin, _jQuery;
	var _search = window.location.search;
	if (_search) {
		_skin = _search.split('demoSkin=')[1];
		_jQuery = _search.indexOf('jQuery=true') !== -1;
		if (_jQuery) document.write('<scr'+'ipt src="jquery-1.6.2.min.js"></sc'+'ript>');
	};
	
	document.write('<scr'+'ipt src="artDialog.source.js?&skin=' + (_skin || 'default') +'"></sc'+'ript>');
	window.isDemoSkin = !!_skin;
})();
</script>
<script src="./artDialog.iframeTools.source.js"></script>
<script src="./_doc/demo.js"></script>
<script src="./_doc/highlight/highlight.pack.js"></script>
<script src="./_doc/highlight/languages/javascript.js"></script>
<script>
hljs.tabReplace = '    ';
hljs.initHighlightingOnLoad();
</script>
<link href="_doc/demo.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="_doc/highlight/styles/magula.css">
</head>

<body>
<div id="doc">
  <div id="header">
    <h1 id="logo"><a href="index.html">artDialog</a></h1>
    <ul id="nav" class="nav">
      <li><a href="./_doc/index.html" class="home">首页</a></li>
      <li><a href="_doc/API.html" class="api">文档</a></li>
      <li><a href="_doc/down.html" class="down">下载</a></li>
      <li><a href="_doc/log.html" class="log">更新</a></li>
      <li><a href="_doc/labs.html" class="labs">实验</a></li>
      <li><a href="_doc/license.html" class="license">授权</a></li>
      |
      <li><a href="#" id="nav-skin">皮肤</a></li>
    </ul>
  </div>
  <div id="main">
    <div class="tips" style="margin:4px 5px; padding:5px; background:#EEF7F5; text-align:center; color:#000; border-radius:3px; border:1px solid #D7EAE2; "><span style="color:#DFB113">新！</span>这是 artDialog4.0.3 版..<a href="_doc/new.html">查看artDialog4新特性</a> <span style="color:#9DCCB8; font-size:9px">(2011-07-15 14:50)</span></div>
    <dl class="about">
      <dt>自适应内容</dt>
      <dd>artDialog的特殊UI框架能够适应内容变化，因此你不必去考虑消息内容尺寸使用它。当然它仍然可以接受一个固定高宽的参数，它能够防止内容溢出或截断，同时也不会产生难看的滚动条；它的消息容器甚至能够根据宽度让文本居中或居左对齐——这一切全是XHTML+CSS原生实现。</dd>
      <dt>强大的接口</dt>
      <dd>配置参数简单而强大，并且每次调用后还会返回控制接口，控制接口支持链式操作，弹出后仍然可以使用外部脚本轻控制它。</dd>
      <dt>细致的体验</dt>
      <dd>如果不是在输入状态，它支持Esc快捷键关闭；可吸附到触发元素附近弹出让操作更便捷；智能给按钮添加焦点；黄金比例垂直居中；预先缓存皮肤图片更快响应……</dd>
      <dt>跨平台兼容</dt>
      <dd>兼容：IE6+、Firefox、Chrome、Safari、Opera。并且IE6下也能支持现代浏览器的静止定位(<a href="http://www.planeart.cn/?p=877" target="_blank" title="阅读作者ie6Fixed相关博文" style="text-decoration:underline">fixed</a>)、覆盖下拉控件、alpha通道png背景。</dd>
    </dl>
    <h2>配置参数</h2>
    <h3>一、使用传统的参数传值</h3>
    <p>art.dialog(content, yesFn, noFn)</p>
    <div id="demoCode01">
      <pre><code class=" javascript">art.dialog('简单愉悦的接口，强大的表现力，优雅的内部实现', function(){alert('yes');});</code></pre>
    </div>
    <p class="buttons">
      <button class="runCode" id="btn1" title="btn1" name="demoCode01">运行&raquo;</button>
    </p>
    <h3>二、使用字面量传值</h3>
    <p>art.dialog(options)</p>
    <div id="demoCode02">
      <pre><code class=" javascript">var dialog = art.dialog({
    title: '欢迎',
	content: '欢迎使用artDialog对话框组件！',
	icon: 'succeed',
    follow: document.getElementById('btn2'),
    yesFn: function(){
        this.title('警告').content('请注意artDialog两秒后将关闭！').lock().time(2);
        return false;
    }
});
</code></pre>
    </div>
    <p class="buttons">
      <button class="runCode" id="btn2" title="btn2" name="demoCode02">运行&raquo;</button>
    </p>
    <p>更多配置参数用法请查阅API文档： <a href="_doc/API.html#options">./_doc/API.html#options</a></p>
    <h2>控制接口</h2>
    <p>需要对弹出后的对话框操作？artDialog的控制接口就是用来干这些事情的，这在异步消息操作中非常有用。</p>
    <p>如需要用外部程序控制对话框关闭，我们可以先定义一个变量引用对话框返回值：</p>
    <pre><code class=" javascript">var testDialog = art.dialog({
    content: 'hello world!'
});
</code></pre>
    <p>然后在可以在其他地方调用"close"方法关闭对话框：</p>
    <pre><code class=" javascript">testDialog.close();</code></pre>
    <p>更多控制接口用法请查阅API文档： <a href="_doc/API.html#API">./_doc/API.html#API</a></p>
    <h2>框架应用扩展</h2>
    <p>框架与框架之间以及与主页面之间进行数据交换是非常头疼的事情，常规情况下你必须知道框架的名称才能进行数据交换，如果是在复杂的多层框架下操作简直就是开发人员噩梦，而这样的问题在CMS多框架应用中十分常见。</p>
    <p>在artDialog中这一切完全被简化，它有一个简单易用的数据共享接口，可以共享任意类型的数据供各个框架页面读取，它与页面名称、层级毫无关系。</p>
    <div id="demoCode04-3">
      <pre><code class="javascript">art.dialog.data('test', document.getElementById('demoInput04-3').value);
art.dialog.data('homeDemoPath', './_doc/');
art.dialog.open('./_doc/iframeA.html', null, false);
// 此时 iframeA.html 页面可以使用 art.dialog.data('test') 获取到数据，如：
// document.getElementById('aInput').value = art.dialog.data('test');
</code></pre>
    </div>
    <p class="buttons"> 请输入测试文字：
      <input id="demoInput04-3" title="demoInput04-3" type="text" value="精于心，简于形" style="padding:4px; width:16em; margin-right:10px" />
      <button class="runCode" name="demoCode04-3">运行&raquo;</button>
    </p>
    <p>（artDialog4正式版文件没有包含此拓展，你需要另外引用 <a href="artDialog.iframeTools.js" target="_blank">artDialog.iframeTools.js</a>）</p>
    <p>更多静态方法用法请查阅API文档： <a href="_doc/API.html#plugin">./_doc/API.html#plugin</a></p>
    <h2>jQuery + artDialog</h2>
    <p>artDialog提供了一个jQuery版本，功能与标准版一致，调用只需要把art前缀改成jQuery的命名空间。</p>
    <pre><code class=" javascript">// 普通调用
$.dialog({content:'hello world!'});

// 使用选择器方式，此时自动使用绑定了live click事件，同时启用follow模式
$('#main .test').dialog({content: 'hello world'});</code></pre>
    <h2>联系</h2>
    <p>如果你对artDialog有什么意见建议可以用下面任意一种联系方式找到作者。artDialog一直在不断完善自身，这个愉悦的过程中感谢有你的参与～</p>
    <p>提交BUG必备项：1、浏览器名称，版本 2、artDialog版本号（只支持4+版本） 3、简明扼要的描述信息 4、建议提取一份BUG DEMO，这样解决问题的概率增加300%</p>
    
    <!--<p style="display:none"><strong>artDialog QQ群: </strong>{不公开} <a href="#" id="guize">验证信息</a></p>
      <div style="display:none" id="qunAbout">
        <div style="margin:4px 0; padding:5px; background:#EEF7F5; margin-bottom:15px; text-align:center; color:#000; border-radius:3px; border:1px solid #D7EAE2; ">(验证信息"<span style="position:relative; width:5em; text-align:center; height:1em; line-height:1em;padding:0 5px;"><span>芝麻开门</span><span style="display:block; position:absolute; left:8px; top:2px; width:100%; height:100%; overflow:hidden; filter:Alpha(opacity=0); opacity:0; color:transparent; _background:#FFF; font-size:1px;">&lt;*)))&gt;{</span></span>")</div>
        <ul>
          <li>1. 遇BUG请说明浏览器、版本号与artDialog版本，并用简洁的语言准确描述出问题。</li>
          <li>2. 提交BUG同时建议提供一份BUG DEOM，这样问题被解决的概率立即提升200%。</li>
        </ul>
        <h3 style="font-weight:bold; margin-top:8px">群规：</h3>
        <ul>
          <li>1. 如果是javascript编码问题，请移步google或者书本。</li>
          <li>2. 遇到使用问题建议仔细阅读API文档与范例，可举一反三。</li>
          <li>3. 不得讨论与群主题无关的事项，以免影响他人工作。</li>
        </ul>
        <p style="margin-top:10px">您同意加入就意味着同意群规，多次违反群规会被直接移除群。</p>
      </div>
      <script>art('#guize').dialog({content: document.getElementById('qunAbout')})</script> -->
    <p>作者：糖饼<br />
      邮箱：<span id="myEmail"></span> <span style="color:#CCC">(恕不提供使用问题咨询，请谅解)</span><br />
      网站：<a href="http://www.planeart.cn" target="_blank">PlaneArt.Cn</a><br />
      微博：<a href="http://t.qq.com/tangbin">t.qq.com/tangbin</a></p>
    <h2>捐赠</h2>
    <p>artDialog就是你一直想要的对话框么？哇～那么我非常期待您能够热情的提供15元或者其他金额的捐赠鼓励～artDialog作者完全凭自己的兴趣作为驱动力而坚持完善这个开源项目，这个过程我希望得到您一点点的支持，正如您支持其他开源项目一样。</p>
    <p><a href="http://www.alipay.com/" target="_blank"><img style="max-height:42px" src="_doc/images/alipay.jpg" alt="支付宝" align="middle" /></a> 帐号：<span id="alipay"></span></p>
    <p>您因如果使用artDialog而受益或者感到愉悦，您还可以这样帮助artDialog成长：</p>
    <p> 1、共同参与并完善artDialog或用blog/微博/Twitter把它分享它给更多的人。</p>
    <p> 2、如artDialog有幸被用在大型项目，请您联系我，我后续将在artDialog主页展示您项目/企业的LOGO（目前有phpCMS、中国电信等企业使用它）。</p>
  </div>
  <div id="footer"></div>
</div>
<script>
$(function($){
	var myMail = 1987 + '.' + 'tangbin' + '@' + 'gmail.com';
	myMail = '<a href="mailto:' + myMail + '">' + myMail + '</a>';
	$('#alipay')[0].innerHTML = myMail;
	$('#myEmail')[0].innerHTML = myMail;
});
</script>
<script>isDemoSkin && window._demoSkin && _demoSkin();</script>
</body>
</html>
